<template>
	<view class="wrap">
		<view class="search container" >
			<view class="dropdown-container" v-if="dropdown.menuTypeOption.length>1">
				<u-dropdown :close-on-click-mask="dropdown.mask" ref="uDropdown" :activeColor="dropdown.activeColor" :borderBottom="dropdown.borderBottom">
					<u-dropdown-item @change="menuTypeChange" v-model="query.menuCode" :title="dropdown.menuTypeTitle" :options="dropdown.menuTypeOption"></u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="search-container">
				<u-search v-model="keywords" @custom="search" @search="search" height="80" placeholder="请输入证件号"></u-search>
			</view>
		</view>		
		<scroll-view class="scroll-list" scroll-y="true"  style="width: 100%; height: 90%; margin-top: 5rpx;margin-bottom: 5rpx;" @scrolltolower="loadMore">
			<view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;">
				<u-collapse :head-style="headStyle">
					<js-collapse-item :title="item.zjhm+' | '+item.fke+' | '+item.wzsj" class="u-border-bottom ">
						<view class="tabContain">
							<u-table>
								<u-tr>
									<u-th width="28%">证件号</u-th>
									<u-td>{{item.zjhm}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">违章类型代码</u-th>
									<u-td>{{item.wzlx==""?"-":item.wzlx}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">违章停借截止日期</u-th>
									<u-td>{{item.wztjjz==""?"-":item.wztjjz}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">实罚款额</u-th>
									<u-td>{{item.fke==""?"-":item.fke}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">违章时间</u-th>
									<u-td>{{item.wzsj==""?"-":item.wzsj}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">违章处理状态</u-th>
									<u-td>{{item.wzzt==""?"-":item.wzzt}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">违章说明</u-th>
									<u-td>{{item.wzyy==""?"-":item.wzyy}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">图书登记号（财产号）</u-th>
									<u-td>{{item.djh==""?"-":item.djh}}</u-td>
								</u-tr>
							</u-table>
						</view>
					</js-collapse-item>
				</u-collapse>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
		</scroll-view>
	</view>
</template>
<script>
	import $time from '@/common/time.js';
	import JsCollapseItem from '@/components/js-collapse-item/js-collapse-item.vue'
	export default {
		components: {
			JsCollapseItem
		},
		data() {
			return {
				keywords: '',
				query: {
					current: 1,
					size: 10 
				},
				swiperCurrent:0,
				list: [],
				pages: 0,
				loadStatus: 'loadmore',
				queryType:'tsWzxx2Apps',
				queryTypeList:[],
				dropdown:{
					borderBottom: false,
					activeColor: '#2979ff',
					mask: true,
					menuTypeOption:[],
					menuTypeTitle:'类型',
				},
				headStyle: {
					fontWeight: 'bold',
					color: '#606266',
					margin: '16rpx'
				},
			};
		},
		onLoad() {
			this.$u.api.menu.getDictByCode({menuCode:this.queryType}).then(res => {
				if (!res.data || res.data.length == 0) {
					return;
				}
				if(res.data.length>0){
					this.queryTypeList=res.data;
					this.query.menuCode=res.data[0].code;
					this.dropdown.menuTypeTitle=res.data[0].name;
					let detaiList = [];
					res.data.forEach((item) => {
						detaiList.push({
							'label': item.name,
							'value': item.code
						});
					})
					this.dropdown.menuTypeOption = detaiList;
				}
				this.loadList();
			})
		},
		computed:{
			
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			getTitle(title,t){
				let len = 14;
				if(title.length>len){
					title=title.substring(0,len);
				}
				title=title+" | "+this.formatTime(t);
				return title;
			},
			formatTime(t) {
				return $time.dateFormat(new Date(t.replace(/-/g, '/')),"{Y}-{MM}-{DD}");
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.query.keywords=value;
				this.loadList();
			},
			
			loadList() {
				this.$u.api.tushu.tsWzxxList(this.query).then(res => {
					if (!res.data.records || res.data.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.data.records);
					this.pages = res.pages;
					this.query.current = res.data.current;
					this.query.size = res.data.size;
					this.loadStatus = "loadmore";
				});
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			change(index){
				this.list = [];
				this.query.current = 0;
				this.query.menuCode=this.queryTypeList[this.swiperCurrent].code;
				this.loadList();
			},
			initMenuType() {
				this.$u.api.dictBizData({
					code: 'mis_talk_type'
				}).then(res => {
					let detaiList = [];
					let detailJson = {
						'label': '全部',
						'value': ''
					}
					detaiList.push(detailJson)
					res.data.forEach((item) => {
						detaiList.push({
							'label': item.dictValue,
							'value': item.dictKey
						});
					})
					this.dropdown.talkTypeOption = detaiList;
				});
			},
			menuTypeChange(index) {
				this.list = [];
				this.query.current = 0;
				this.query.menuCode=index
				this.dropdown.menuTypeTitle=(index===''?'类型':this.getOptionLabel(this.dropdown.menuTypeOption,index));
				this.loadList()
			},
		}
	};

</script>
<style lang="scss">
@import '../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
	width: 100%;
}
.search{
	height:55px;
	background-color: #ffffff;
	// background-image: url(/static/aidex/school_bg.jpg);
	background-size: 450px;
}
.uni-title{
	font-size: 30rpx;
	color: #333333;
	padding: 10px;
	background: #fff;
	border-top:1px solid #ededed;
	margin-top: 20rpx;
}
.uni-media-list {
    padding: 15px 15px;

}
.uni-media-list-body {
    height: 60px;
	padding-left:20rpx;
	border-left:thick double #D5D5D5;
	border-width: 1px;
}
.uni-media-list-text-top{
	width: 100%;
	line-height: 35rpx;
	font-size: 28rpx;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-content {
    width: 100%;
    line-height: 35rpx;
    font-size: 22rpx;
	color: darkgray;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-bottom {
    width: 100%;
    line-height: 24rpx;
    font-size: 26rpx;
	color: #666666;
	text-align: right;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-right {
    height: 60px;
	padding-left:20rpx;
	transform: translateY(40%) translateX(50%)
}
/deep/ .u-dropdown__content__mask{
  opacity: 0;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.dropdown-container {
	width: 30%;
	
	background-color: #f2f2f2;
	border-radius: 40rpx;
}
.search-container {
  width: 100%;
  margin-left: 10px;
}
.dropdown, .search-container {
  padding: 5px;
  border-radius: 5px;
}
</style>